import React from 'react';
import ProTable from '@ant-design/pro-table';
import { Image } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect, FormattedMessage, Link } from 'umi';
import { searchItemList } from '@/services/item/item';

const columns = [
  {
    title: <FormattedMessage id="pages.work.workList.fileColumns.index" />,
    valueType: 'index',
  },
  {
    title: '作品名称',
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: '作品类型',
    dataIndex: 'category',
    valueEnum: {
      1: '文字作品',
      2: '图片作品',
      3: '视频作品',
    },
  },
  {
    title: '预览',
    dataIndex: 'img',
    hideInSearch: true,
    render: (_, record) => (
      <Image
        width={300}
        height={220}
        alt="logo"
        preview={false}
        src={`/api/getFile/?fileHash=${record.fileHash}`}
        fallback=""
      />
    ),
  },
  {
    title: '出售方式',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      2: '定价',
      3: '拍卖',
      4: '授权',
    },
  },
  {
    title: '作品创建者',
    hideInSearch: true,
    render: (_, record) => {
      return record.creator.username;
    },
  },
  {
    title: '作品拥有者',
    hideInSearch: true,
    render: (_, record) => {
      return record.owner.username;
    },
  },
  {
    title: '备注',
    dataIndex: 'memo',
    search: false,
  },
  {
    title: '操作',
    valueType: 'option',
    render: (_, record) => {
      return <Link to={`/trade/item/${record.id}`}>详情</Link>;
    },
  },
];

const MyItemTable = (props) => {
  const { currentUser } = props;

  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        columns={columns}
        params={{ userID: currentUser.id, onSale: true }}
        request={(params, sorter, filter) => searchItemList({ ...params, sorter, filter })}
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        headerTitle="作品列表"
      />
    </PageContainer>
  );
};

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(MyItemTable);
